<template>
	<view>
		<u-swipe-action>
			<u-swipe-action-item @click="handelClick(item)" :options="options1" v-for="item,index in cartList "
				:key="item.goods_id">
				<view class="swipe-action u-border-top u-border-bottom">
					<view class="goods_item">
						<view @click.stop="itemClick()" style="display: flex;">
							<image :src=" item.goods_img ? item.goods_img : defaultImg" mode=""></image>
							<view class="info">
								<view class="goodsName hidden_text">
									{{item.goods_name}}
								</view>
								<view class="goodsNum">
									库存：{{item.goods_num}}<text v-if="item.unit != ''">({{item.unit}})</text>
								</view>
							</view>
						</view>
						<view class="addGoods">
							<u-number-box>
								<view @click="decreaseGoods(item)" slot="minus" class="minus">
									<u-icon name="minus" size="12" color="#f9b85c"></u-icon>
								</view>
								<view slot="input" style="width: 30px;text-align: center;" class="input">
									<input @blur="selfInput(item)" v-model='item.quantity' type="number" />
								</view>
								<view slot="plus" class="plus" @click="addGoods(item)">
									<u-icon name="plus" color="#ff0000" size="12"></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#ff0000'
					}
				}],
				value: 1,
				defaultImg: '/static/images/shixiao.png',
				// goodsItemList: this.$store.state.cart.cart
			};
		},
		// props: {
		// 	goodsItemList: {
		// 		type: Array,
		// 		default: () => []
		// 	}
		// },
		computed: {
			...mapGetters([
				'cartList'
			])
		},
		methods: {
			...mapMutations('cart', ['addToCart', 'upToCart', 'clearCart', 'SELF_INPUT', 'DELETE_GOODS']),
			// 添加
			addGoods(item) {
				this.addToCart(item)
			},
			//减少
			decreaseGoods(item) {
				if (item.quantity <= 0) return
				this.upToCart(item)
			},
			//输入框添加
			selfInput(item) {
				this.SELF_INPUT(item)
				// console.log(item);
				// console.log(item.quantity);
			},
			//滑动删除
			handelClick(item) {
				this.DELETE_GOODS(item)
				this.$emit('change')
			},
			itemClick() {
				console.log(2);
			}
		},
	};
</script>

<style lang="scss">
	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			padding: 40rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	.u-border-top {
		border-top: unset;
	}

	.goods_item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}

		.info {
			margin-left: 20rpx;
			width: 300rpx;

			.goodsName {
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}

			.goodsNum {
				font-size: 26rpx;
				color: #f9b85c;
			}
		}

		.addGoods {
			display: flex;
			align-items: center;
		}
	}

	.minus {
		width: 50rpx;
		height: 50rpx;
		border: 1px solid #f9b85c;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 50rpx;
		height: 50rpx;
		border: 1px solid #ff0000;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hidden_text {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 设置最大显示行数 */
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		word-wrap: break-word;
	}
</style>